eControl.vue<template>
  <div class="app-container">
<!--    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="位置" prop="node">
        <el-select v-model="queryParams.node"  >
          <el-option
            v-for="item in optionsArea"
            :key="item.id"
            :label="item.areaName"
            :value="item.id">
          </el-option>
        </el-select>

      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>-->


    <el-descriptions class="margin-top"  :column="3"  border>
      <el-descriptions-item  >
        <div class="app-container">
          <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="4" ><div class="grid-content bg-purple">风机开启帽：</div></el-col>
            <el-col :span="4" ><div class="grid-content bg-purple"><el-switch  v-model="A07" active- ="#13ce66" inactive-color="#000000" active-text="排风" inactive-text="停止"  active-value="110000" inactive-value="100000" @change='changeStatus1($event,"A07","A08")'> </el-switch></div></el-col>
            <el-col :span="4" ><div class="grid-content bg-purple"><el-switch  v-model="A08" active-color="#13ce66" inactive-color="#000000" active-text="吸风" inactive-text="停止" active-value="110000" inactive-value="100000" @change='changeStatus1($event,"A08","A07")'> </el-switch></div></el-col>

          </el-row>
          <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="4" ><div class="grid-content bg-purple">排风机：</div></el-col>
            <el-col :span="8" ><div class="grid-content bg-purple"><el-switch  v-model="A14" active-color="#13ce66" inactive-color="#000000" active-text="开启" inactive-text="关闭" active-value="110000" inactive-value="100000" @change='changeStatus($event,"A14")'> </el-switch></div></el-col>
          </el-row>
          <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="4"><div class="grid-content bg-purple">前端底部卷膜：</div></el-col>
            <el-col :span="4" ><div class="grid-content bg-purple"><el-switch  v-model="A09" active-color="#13ce66" inactive-color="#000000" active-text="上升" inactive-text="停止"  active-value="110000" inactive-value="100000" @change='changeStatus1($event,"A09","A10")'> </el-switch></div></el-col>
            <el-col :span="4" ><div class="grid-content bg-purple"><el-switch  v-model="A10" active-color="#13ce66" inactive-color="#000000" active-text="下降" inactive-text="停止" active-value="110000" inactive-value="100000" @change='changeStatus1($event,"A10","A09")'> </el-switch></div></el-col>
          </el-row>
          <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="4"><div class="grid-content bg-purple">内层上部卷膜：</div></el-col>
            <el-col :span="4" ><div class="grid-content bg-purple"><el-switch  v-model="A11" active-color="#13ce66" inactive-color="#000000" active-text="上升" inactive-text="停止"  active-value="110000" inactive-value="100000" @change='changeStatus1($event,"A11","A12")'> </el-switch></div></el-col>
            <el-col :span="4" ><div class="grid-content bg-purple"><el-switch  v-model="A12" active-color="#13ce66" inactive-color="#000000" active-text="下降" inactive-text="停止" active-value="110000" inactive-value="100000" @change='changeStatus1($event,"A12","A11")'> </el-switch></div></el-col>
          </el-row>
          <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="4"><div class="grid-content bg-purple">内层棉被卷帘：</div></el-col>
            <el-col :span="4" ><div class="grid-content bg-purple"><el-switch  v-model="A01" active-color="#13ce66" inactive-color="#000000" active-text="上升" inactive-text="停止"  active-value="110000" inactive-value="100000" @change='changeStatus1($event,"A01","A02")'> </el-switch></div></el-col>
            <el-col :span="4" ><div class="grid-content bg-purple"><el-switch  v-model="A02" active-color="#13ce66" inactive-color="#000000" active-text="下降" inactive-text="停止" active-value="110000" inactive-value="100000" @change='changeStatus1($event,"A02","A01")'> </el-switch></div></el-col>
          </el-row>
          <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="4"><div class="grid-content bg-purple">外层棉被卷帘：</div></el-col>
            <el-col :span="4" ><div class="grid-content bg-purple"><el-switch  v-model="A03" active-color="#13ce66" inactive-color="#000000" active-text="上升" inactive-text="停止"  active-value="110000" inactive-value="100000" @change='changeStatus1($event,"A03","A04")'> </el-switch></div></el-col>
            <el-col :span="4" ><div class="grid-content bg-purple"><el-switch  v-model="A04" active-color="#13ce66" inactive-color="#000000" active-text="下降" inactive-text="停止" active-value="110000" inactive-value="100000" @change='changeStatus1($event,"A04","A03")'> </el-switch></div></el-col>
          </el-row>
          <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="4"><div class="grid-content bg-purple">循环水泵：</div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple"><el-switch  v-model="A15" active-color="#13ce66" inactive-color="#000000" active-text="开启" inactive-text="关闭" active-value="110000" inactive-value="100000" @change='changeStatus($event,"A15")'> </el-switch></div></el-col>
          </el-row>
          <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="4"><div class="grid-content bg-purple">补光灯：</div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple"><el-switch  v-model="A16" active-color="#13ce66" inactive-color="#000000" active-text="开启" inactive-text="关闭" active-value="110000" inactive-value="100000" @change='changeStatus($event,"A16")'> </el-switch></div></el-col>
          </el-row>
          <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="4"><div class="grid-content bg-purple">热风炉：</div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple"><el-switch  v-model="A13" active-color="#13ce66" inactive-color="#000000" active-text="开启" inactive-text="关闭" active-value="110000" inactive-value="100000" @change='changeStatus($event,"A13")'> </el-switch></div></el-col>
          </el-row>
          <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="4"><div class="grid-content bg-purple">水肥一体机：</div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple"><el-switch  v-model="A17" active-color="#13ce66" inactive-color="#000000" active-text="开启" inactive-text="关闭" active-value="110000" inactive-value="100000" @change='changeStatus($event,"A17")'> </el-switch></div></el-col>
          </el-row>

          <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="4"><div class="grid-content bg-purple">杀虫灯：</div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple"><el-switch  v-model="A18" active-color="#13ce66" inactive-color="#000000" active-text="开启" inactive-text="关闭" active-value="110000" inactive-value="100000" @change='changeStatus($event,"A18")'> </el-switch></div></el-col>
          </el-row>
          <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="4"><div class="grid-content bg-purple">备用1：</div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple"><el-switch  v-model="A19" active-color="#13ce66" inactive-color="#000000" active-text="开启" inactive-text="关闭" active-value="110000" inactive-value="100000" @change='changeStatus($event,"A19")'> </el-switch></div></el-col>
          </el-row>
          <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="4"><div class="grid-content bg-purple">备用2：</div></el-col>
            <el-col :span="4" ><div class="grid-content bg-purple"><el-switch  v-model="A05" active-color="#13ce66" inactive-color="#000000" active-text="上升" inactive-text="停止"  active-value="110000" inactive-value="100000" @change='changeStatus1($event,"A05","A06")'> </el-switch></div></el-col>
            <el-col :span="4" ><div class="grid-content bg-purple"><el-switch  v-model="A06" active-color="#13ce66" inactive-color="#000000" active-text="下降" inactive-text="停止" active-value="110000" inactive-value="100000" @change='changeStatus1($event,"A06","A05")'> </el-switch></div></el-col>
          </el-row>
        </div>
      </el-descriptions-item>

    </el-descriptions>


  </div>
</template>

<script>
import { relay,relays} from "@/api/iot/equipment";
import { listAreaAll} from "@/api/iot/area";
import mqtt from 'mqtt'
import { MQTT_SERVICE, MQTT_USERNAME, MQTT_PASSWORD } from '@/utils/index'
let client
const options = {
  connectTimeout: 40000,
  clientId: 'mqtitId-Home',
  username: MQTT_USERNAME,
  password: MQTT_PASSWORD,
  keepAliveInterval: 10,//当时间为60时会出现断链问题
  clean: true
}
client = mqtt.connect(MQTT_SERVICE, options)
client.linkState=true;
export default {
  name: "EControl_SC",
  data() {
    return {
      // 遮罩层
      loading: true,
      A01: '100000',
      A02: '100000',
      A03: '100000',
      A04: '100000',
      A05: '100000',
      A06: '100000',
      A07: '100000',
      A08: '100000',
      A09: '100000',
      A10: '100000',
      A11: '100000',
      A12: '100000',
      A13: '100000',
      A14: '100000',
      A15: '100000',
      A16: '100000',
      A17: '100000',
      A18: '100000',
      A19: '100000',
      eData:[],
      mqttData:[],
      optionsArea:[{
        id: 'updata/device_1',
        areaName: '花卉大棚'
      }, {
        id: 'updata/device_2',
        areaName: '蔬菜大棚'
      }, {
        id: 'updata/device_3',
        areaName: '葡萄大棚'
      }],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 设备管理表格数据
      equipmentList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        node: null
      }
    };
  },
  created() {
    // this.getListArea();
    this.mqttMSG();
  },
  methods: {
    /** 查询设备管理列表 */
    changeStatus($event,num){
      this.loading = true;
      relay($event,num,'sub/device_2').then(response => {
        // this.equipmentList = response.rows;
        this.loading = false;

      });
    },
    /** 查询设备管理列表 */
    changeStatus1($event,node,node1){
      this.loading = true;
      relays($event,node,node1,'sub/device_2').then(response => {
        // this.equipmentList = response.rows;
        this.loading = false;

      });
    },
    /** 查询区域列表 */
    getListArea() {
      this.loading = true;
      listAreaAll(this.queryParams).then(response => {
        this.optionsArea = response.rows;
        this.loading = false;

      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.mqttMSG(this.queryParams.node);
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    mqttMSG () {
      // mqtt连接
      client.on('connect', (e) => {
        console.log('连接成功:')
        client.subscribe('updata/device_2', { qos: 0 }, (error) => {
          if (!error) {
            console.log('订阅2成功')
          } else {
            console.log('订阅2失败')
          }
        })

      })
      // 接收消息处理
      client.on('message', (topic, message) => {
        let mqttDatas=JSON.parse(message);
        if(mqttDatas.B01==1){
          this.A01='110000';
        }else{
          this.A01='100000';
        }
        if(mqttDatas.B02==1){
          this.A02='110000';
        }else{
          this.A02='100000';
        }
        if(mqttDatas.B03==1){
          this.A03='110000';
        }else{
          this.A03='100000';
        }
        if(mqttDatas.B04==1){
          this.A04='110000';
        }else{
          this.A04='100000';
        }
        if(mqttDatas.B05==1){
          this.A05='110000';
        }else{
          this.A05='100000';
        }
        if(mqttDatas.B07==1){
          this.A07='110000';
        }else{
          this.A07='100000';
        }
        if(mqttDatas.B06==1){
          this.A06='110000';
        }else{
          this.A06='100000';
        }
        if(mqttDatas.B08==1){
          this.A08='110000';
        }else{
          this.A08='100000';
        }
        if(mqttDatas.B09==1){
          this.A09='110000';
        }else{
          this.A09='100000';
        }
        if(mqttDatas.B10==1){
          this.A10='110000';
        }else{
          this.A10='100000';
        }
        if(mqttDatas.B11==1){
          this.A11='110000';
        }else{
          this.A11='100000';
        }
        if(mqttDatas.B12==1){
          this.A12='110000';
        }else{
          this.A12='100000';
        }
        if(mqttDatas.B13==1){
          this.A13='110000';
        }else{
          this.A13='100000';
        }
        if(mqttDatas.B14==1){
          this.A14='110000';
        }else{
          this.A14='100000';
        }
        if(mqttDatas.B15==1){
          this.A15='110000';
        }else{
          this.A15='100000';
        }
        if(mqttDatas.B17==1){
          this.A17='110000';
        }else{
          this.A17='100000';
        }
        if(mqttDatas.B18==1){
          this.A18='110000';
        }else{
          this.A18='100000';
        }
        if(mqttDatas.B19==1){
          this.A19='110000';
        }else{
          this.A19='100000';
        }
        if(mqttDatas.B16==1){
          this.A16='110000';
        }else{
          this.A16='100000';
        }


      })
      // 断开发起重连
      client.on('reconnect', (error) => {
        console.log('正在重连:', error)
      })
      // 链接异常处理
      client.on('error', (error) => {
        console.log('连接失败:', error)
      })
      client.on('close',()=>{
        client.end;
      })
    }


  }
};
</script>
<style >
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 40px;
    margin-bottom: 20px;
    border-radius: 20px;
    font-size: 15px;
    text-align: center;
    line-height: 40px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
